<template>
<div class="dialog" v-show="visible">
    <div class="content">
        <div class="title ellipsis">
             <slot name="title"></slot>
        </div>
        <div class="main">
            <slot></slot>
        </div>
        <div class="foot">
            <slot name="foot"></slot>
        </div>
    </div>
</div>    
</template>

<script>
export default {
    props:{
        visible:{
            type:Boolean,
            default:false
        }
    },
    data() {
        return {

        }
    }
}
</script>

<style lang="scss" scoped>
.dialog {
    position: fixed;
    justify-content: center;
    align-content: center;
    top:0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    .content {
        position: absolute;
        top: 50%;
        left: 16px;
        right: 16px;
        padding-bottom: 40px;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
        background-color: #FFFFFF;
        border-radius: 3px;
        overflow: hidden;
        .title {
            height: 40px;
            line-height: 19px;
            padding: 10px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            
        }
        .main {
            color: rgba(0, 0, 0, 0.5);
            word-break: break-all;
            min-height: 200px;
            max-height: 500px;
            padding: 20px 10px;
            overflow-y: scroll;
        }
        .foot {
            position: absolute;
            bottom: 0px;
            width:100%;
            height: 50px;
            line-height: 49px;
            font-size: 16px;
            text-align: center;
            color: #576B95;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }
    }
    
}
</style>
